<template>
    <f7-page no-navbar class="tab1">
        TAB1
        <f7-link  href="/form/">Form</f7-link>
        <!--<div>-->
            <!--<ul :class="clicked?'ul_clicked':''">-->
                <!--<li class="card" :class="clicked?'card_clicked':''" v-for="(item, index) in 12">-->
                    <!--Index: {{index+1}}-->
                <!--</li>-->
            <!--</ul>-->
        <!--</div>-->
    </f7-page>
</template>
<script>
  export default {
    data () {
      return {
        clicked: true,
      }
    },
    // mounted () {
    //   let self = this
    //   let pageY, moveY, tempY, startMarginTop, newIndex, oldIndex, sublingEle;
    //   // 触摸开始
    //   self.$$('.card').on('touchstart', function (e) {
    //     pageY = e.changedTouches[0].pageY
    //     startMarginTop = parseInt(window.getComputedStyle(e.target, null).marginTop)
    //     console.log(moveY)
    //   })
    //   // 触摸滑动
    //   self.$$('.card').on('touchmove', function (e) {
    //     moveY = e.changedTouches[0].pageY - pageY
    //     // 判断下拉时机
    //     if (Math.abs(moveY) > 60) {
    //       if(self.$$(this).prevAll().eq(newIndex) === self.$$('.card').eq(0)) {return}
    //       // 判断下拉元素下标
    //       newIndex = Math.floor(Math.abs(moveY) / 60) - 1
    //       // 更新下标和当前展开元素
    //       if (newIndex !== oldIndex) {
    //         oldIndex = newIndex
    //         tempY = e.changedTouches[0].pageY
    //         sublingEle = self.$$(this).prevAll().eq(newIndex).css('margin-top')
    //       }
    //       // 赋值高度
    //       self.$$(this).prevAll().eq(newIndex).css('margin-top', parseInt(sublingEle) + e.changedTouches[0].pageY - tempY + 'px')
    //       // console.log('newIndex:',newIndex,'Y:',e.changedTouches[0].pageY - tempY)
    //     } else {
    //       this.style.marginTop = startMarginTop + moveY + 'px'
    //     }
    //   })
    // },
  }
</script>
<style lang="scss">
    .tab1 {
        ul {
            list-style: none;
            overflow: hidden;
            height: 92.2vh;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            padding-top: 70vh;
            padding-bottom: 50px;
        }
        .card {
            margin: 0;
            height: 64vh;
            background: white;
            border: 1px solid #c7c7c7;
            border-radius: 4px;
            margin-top: -70vh;
            box-shadow: 0px 0px 3px 0px #989898;
            /*transition:  all 1s ease-in;*/
        }
        .ul_clicked {
            padding-top: 63vh;
        }
        .card_clicked {
            margin-top: -63vh;
        }
        .card_first {

        }
    }
</style>
